<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>扩展选择器</title>
       <style>
           div p{
               color: red;

           }
           div > P{
               border: 1px solid;

           }
          input[type="text"]{
              border: 5px solid;
          }
          a:link{
              color: red;
          }
           a:hover{
               color: green;
           }
           a:active{
               color: blue;
           }
           a:link{
               color: black;
           }

       </style>

    </head>
    <body>
        <!--
   扩展选择器:
        1.选择所有元素: 语法: *{}
        2.并级选择器:同时选择多个选择器中的元素
                   语法: 选择器1,选择器2{}
        3.子选择器: 筛选选择器1下的选择器2
                  语法: 选择器1 选择器2{}
        4.父选择器: 筛选选择器2的父选择器1
                  语法: 选择器1>选择器2{}
        5.属性选择器:选择元素名称,属性名=属性值的元素
                   语法:元素名称[属性名="属性值"]{}
        6.伪类选择器:选择一些元素具有的状态
                   语法:元素:状态{}
                   如:<a>
                     状态:link :初始化状态
                         visited:被访问过的状态
                         active:正在访问状态
                         hover:鼠标悬浮状态
        -->
       <div>
           少壮不努力
           <P>黑马程序员</P>
           <p>传智播客</p>
       </div>

           <p>黑马程序员</p>
       <input type="text" name="username"><br>

        <input type="password" name="username"><br>
        <a href="#">传智播客</a>


    </body>
</html>